<template>
    <div>
        <el-dialog title="在线咨询" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <div class="onlineList">
                <ul v-if="this.userInfo.staffType === '8'">
                    <!-- 客服视角 -->
                    <li class="leftChat" v-for="item in onlineData" :key="item">
                        <!-- 左边 -->
                        <div class="onlineLeft" v-if="item.newsType == 0">
                            <img width="30" height="30" src="@/assets/images/userImg2.png" alt="">
                            <p class="onlineRight">{{ item.newsContent }}</p>
                        </div>
                        <!-- 右边 -->
                        <div class="onlineNew" v-if="item.newsType == 1">
                            <p class="onlineRight">{{ item.newsContent }}</p>
                            <img width="35" height="30" src="@/assets/images/kefu.png" alt="">
                        </div>
                    </li>

                </ul>
                <ul v-else>
                    <!-- 用户视角 -->
                    <li class="leftChat" v-for="(item, index) in onlineData" :key="index">
                        <!-- 左边 -->
                        <div class="onlineLeft" v-if="item.newsType == 1">
                            <img width="35" height="30" src="@/assets/images/kefu.png" alt="">
                            <p class="onlineRight">{{ item.newsContent }}</p>
                        </div>
                        <!-- 右边 -->
                        <div class="onlineNew" v-if="item.newsType == 0">
                            <p class="onlineRight">{{ item.newsContent }}</p>
                            <img width="30" height="30" src="@/assets/images/userImg2.png" alt="">
                        </div>
                    </li>
                </ul>
            </div>
            <span slot="footer" class="dialog-footer">
                <div class="iconWrapper">

                </div>

                <div class="footWrapper">
                    <el-input @keyup.enter.native="handleSend" @submit.native.prevent v-model="input" placeholder="请输入内容"
                        clearable></el-input>
                    <el-button type="primary" @click="handleSend()" icon="el-icon-s-promotion">发送</el-button>
                </div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { sendWebsocket, closeWebsocket } from '@/utils/socketChat.js'
export default {
    data() {
        return {
            dialogVisible: false,
            input: "",
            onlineData: [],
            userInfo: {}
        }
    },
    created() {

    },
    mounted() {
        // // 添加socket通知监听
        window.addEventListener('onmessageWS', this.getSocketData)
    },
    updated() {
        // 在接收到新消息的时候触发方法将滚动条定位到底部
        this.scrollToBottom()
    },
    methods: {
        // 定义将滚动条定位在底部的方法
        scrollToBottom() {
            this.$nextTick(() => {
                let chat = this.$el.querySelector(".onlineList")
                chat.scrollTop = chat.scrollHeight
            })
        },
        open() {
            // 添加socket通知监听
            // window.addEventListener('onmessageWS', this.getSocketData)
            // this.onlineData = []
            this.dialogVisible = true
            this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
            // if (this.userInfo.staffType !== '8') {
            //     this.bus.$emit('chatWeb')
            // }
            // 页面首次展示时滚动条定位底部
            this.scrollToBottom()
        },
        // 收到消息处理
        getSocketData(res) {
            var that = this
            if (res.detail.data === 403) {
                this.$confirm('当前客服繁忙，请稍后咨询!', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.dialogVisible = false
                }).catch(() => {
                    this.dialogVisible = false
                });
            } else if (res.detail.data === 4040) {
                this.$confirm('当前客服繁忙，请稍后询问!', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.dialogVisible = false
                }).catch(() => {
                    this.dialogVisible = false
                });
            }else if (res.detail.data === 1404) {
                this.$confirm('对方已离线!', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.dialogVisible = false
                }).catch(() => {
                    this.dialogVisible = false
                });
            } else if (res.detail.data === 500) {
                this.$confirm('连接报错!', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.dialogVisible = false
                }).catch(() => {
                    this.dialogVisible = false
                });
            } else {
                var chat = res.detail.data
                that.onlineData.push(chat)
                this.$forceUpdate()//强制刷新
            }
        },
        // 发送消息
        handleSend() {
            if (!this.input) {
                this.$message({
                    message: '请输入内容',
                    type: 'warning'
                });
                return false;
            }
            if (this.$socketApi.wsChat.readyState === 1) {//
                if (this.userInfo.staffType === '8') {//客服
                    let obj = {
                        newsType: 1,
                        newsContent: this.input
                    }
                    this.onlineData.push(obj)
                    this.input = ''

                    this.$socketApi.wsChat.send(JSON.stringify(obj))
                } else {//非客服
                    let obj = {
                        newsType: 0,
                        newsContent: this.input
                    }
                    this.onlineData.push(obj)
                    this.input = ''
                    this.$socketApi.wsChat.send(JSON.stringify(obj))
                }
            } else {
                this.$confirm('当前连接已关闭!', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.dialogVisible = false
                }).catch(() => {
                    this.dialogVisible = false
                });
            }
        },
        // 关闭弹框前提示
        handleClose() {
            if (this.userInfo.staffType !== '8') {
                this.$confirm('确认关闭吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.onlineData = []
                    this.dialogVisible = false
                    this.$socketApi.wsChat.close()
                    this.input= ""
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消关闭'
                    });
                });
            } else {
                this.onlineData = []
                this.dialogVisible = false
                this.input= ""
            }
        },
        handleAllClose() {
            this.dialogVisible = false
            this.onlineData = []
            this.input= ""
        }
    }
}
</script>
<style lang="less" scoped>
@import './online.less';
</style>
